<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('全部流程')" />
    <style>
        .layui-badge{
            height: 18px;
            line-height: 18px;
            position: relative;
            display: inline-block;
            padding: 0 6px;
            font-size: 14px;
            text-align: center;
            background-color: #FF5722;
            color: #fff;
            border-radius: 2px;
        }
        .layui-bg-green {
            background-color: #009688!important;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div" style="padding: 20px 28px;">
    <div class="row">
        <div class="col-sm-4" th:each="df : ${sysProcessList}" th:onclick="startProcess([[${df.getName()}]], [[${df.getProcessModelId()}]], [[${df.getFormId()}]])">
            <div class="ibox">
                <div class="ibox-title" style="display: flex;justify-content: space-between;align-items: baseline;">
                    <h5 th:text="${df.getName()}"></h5>
                    <span th:if="${df.getType() == '1'}" class="layui-badge">系统案例</span>
                    <span th:if="${df.getType() == '0'}" class="layui-badge layui-bg-green">用户创建</span>
                </div>
                <div class="ibox-content" style="height: 200px;display: flex;align-items: center;justify-content: center;">
                    <img class="act_png" src="" th:data-pdid="${df.getDefinitionId()}" th:data-png="${df.getDiagramResourceName()}" style="width: auto;height: auto;max-width: 100%;max-height: 100%;">
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">

    $.modal.open

    $(function(){
        var arr = $(".act_png");
        for(var i=0 ; i<arr.length ; i++){
            var current = arr[i];
            var pdid = $(current).data("pdid");
            var png = $(current).data("png");
            $(current).attr("src", "/act/processDefinition/readResource?pdid="+pdid+"&resourceName="+png);
        }
    })

    function startProcess(processName, processModelId, formId){
        $.modal.confirm("确定发起该流程吗？", function() {
            if(formId == null || formId == ''){
                $.ajax({
                    url: '/act/processDefinition/startSysProcessByNullForm?processModelId='+processModelId,
                    type: 'get',
                    success: function(res){
                        if(res.code == 0){
                            $.modal.msgSuccess("流程发起成功");
                        } else {
                            $.modal.msgError("流程发起失败");
                        }
                    },
                    error: function (res) {
                        $.modal.msgError("流程发起异常，"+res.msg);
                    }
                })
            } else {
                $.modal.open(processName, '/act/processDefinition/startForm?processModelId='+processModelId);
            }
        })
    }
</script>
</body>
</html>